var swiper1 = new Swiper('#swiper1', {
    loop: true,
    spaceBetween: 0,
    autoplay: {
        delay: 3500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    keyboard: true,
});

swiper1.el.onmouseover = function() {
        swiper1.autoplay.stop();
    },
    //鼠标离开开始自动切换
    swiper1.el.onmouseout = function() {
        swiper1.autoplay.start();
    }

var swiper2 = new Swiper('#swiper2', {
    slidesPerView: 5,
    spaceBetween: 10,
    slidesPerGroup: 5,
    loop: false,
    loopFillGroupWithBlank: true,
    pagination: {
        el: '.swiper2.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});


var swiper3 = new Swiper('#swiper3', {
    loop: true,
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 3500,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    }
});

//登录区域雪碧图
const bcItem = document.querySelectorAll('.login-area-m li div');
for (let i = 0; i < bcItem.length; i++) {
    bcItem[i].style.backgroundPosition = `${4-47*i}px`
}

// $(function() {
//     $('.login-area-m li div').each(function(index, ele) {
//         $('.login-area-m li div').css('backgroundPosition', (4 - index * 47) + "px")
//     })
// })

//尾部区域雪碧图
const footerItem = document.querySelectorAll('.footer-top p span');
for (let i = 0; i < footerItem.length; i++) {
    footerItem[i].style.backgroundPosition = `${-74 - 40*i}px 0`
}

//动态生成手机、平板、电视列表里面的子内容
const li = document.querySelectorAll('.swiper-list li');
// console.log(li);
ajax({
    url: '../php/findgoods.php',
    type: 'post',
    dataType: 'json',
}).then(res => {
    // console.log(res);
    let str = ""
    res.forEach(function(item, index) {
        if (true) {
            str += `            
        <a href="javascript:;" class="${res[index].key} momo">
        <span><img src="${res[index].goods_img}" alt=""></span>
        <span>${res[index].good_classification}</span>
    </a>`
        }

    })
    str += ` <a href="javascript:;">查看全部</a>`
    document.querySelector('.list-details').innerHTML = str;
})
$(".swiper-list > li").mouseenter(function() {
    $(".swiper-list").css({ borderRadius: "10px 0 0 10px" })
    $(".list-details").css({ display: "block" })
    $(`.list-details > .${$(this).attr("data-key")}`).attr("style", "")
    $(`.list-details > .momo`).not(`.${$(this).attr("data-key")}`).css({ display: "none" })
})
$(".swiper-list").mouseleave(function() {
    $(".list-details").css({ display: "none" })
    $(".swiper-list").css({ borderRadius: "10px" })
})